<template>
  <div class="toast" v-show="isShow">
    <div>{{ message }}</div>
  </div>
</template>

<script>
  export default {
    name: "",
    data(){
      return {
        message: '',
        isShow: false
      }
    },
    methods: {
      show(message='默认文字', duration=1500){
        this.isShow = true
        this.message = message

        setTimeout(() => {
          this.isShow = false
          this.message = ''
        }, duration)
      }
    }
  }
</script>

<style lang="less" scoped>
.toast{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99;
  padding: 10px;
  border-radius: 24px;
  
  transform: translate(-50%, -50%);
  background-color: rgba(0,0,0,.6);
  color: white;
}
</style>
